<template>
  <div class="app-container">
    <div class="top_button">
      <div class="add_delete_btn">
        <button class="add_slogan">
          <svg-icon iconClass="jia" className="svg-icon"></svg-icon>添加广告
        </button>
        <button class="delete_batch">
          <svg-icon iconClass="shanchu" className="svg-icon"></svg-icon>批量删除
        </button>
      </div>
      <div class="search_box">
        <input type="text" placeholder="请输入关键字" />
        <button class="search_btn">搜索</button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table_show">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" align="center" width="50">
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="80">
        </el-table-column>
        <el-table-column prop="type" align="center" label="分类"> </el-table-column>
        <el-table-column prop="sloganLogo" align="center" label="图片"> </el-table-column>
        <el-table-column prop="logoSize" align="center" label="尺寸"> </el-table-column>
        <el-table-column prop="chainedAddress" align="center" label="链接地址">
        </el-table-column>
        <el-table-column
          prop="uploadTime"
          align="center"
          label="加入时间"
        ></el-table-column>
        <el-table-column prop="state" align="center" width="60" label="状态">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleForbid(scope.$index, scope.row)"
              >禁用</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleCompile(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
// 引入分页
import pagination from "@/components/Pagination";
import { getSloganList } from "@/api/news";
export default {
  name: "slogan_list",
  components: {
    pagination,
  },
  data() {
    return {
      listLoading: false,
      total: 0,
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [
        {
          id: 1,
          sort: 2,
          type: "广告",
          sloganLogo: "",
          logoSize: "1080*1080",
          chainedAddress: "123132132123",
          uploadTime: "2010-05-05 11:00:00",
          state: true,
        },
        {
          id: 1,
          sort: 2,
          type: "广告",
          sloganLogo: "",
          logoSize: "1080*1080",
          chainedAddress: "123132132123",
          uploadTime: "2010-05-05 11:00:00",
          state: true,
        },
        {
          id: 1,
          sort: 2,
          type: "广告",
          sloganLogo: "",
          logoSize: "1080*1080",
          chainedAddress: "123132132123",
          uploadTime: "2010-05-05 11:00:00",
          state: true,
        },
      ],

      // 开关
      value: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 分页
    getList(val) {
      this.total = 100;
      console.log(val);
      this.listLoading = true;

      this.listLoading = false;
    },

    // 表格里的方法
    // 禁用
    handleForbid(index, row) {
      console.log(index, row);
    },
    // 编辑
    handleCompile(index, row) {
      console.log(index, row);
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  mounted() {
    getSloganList().then((res) => {
      console.log(res);
    });
  },

  // created() {
  //   // getSloganList().then((res) => {
  //   //   console.log(res);
  //   // });
  // },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 44px 30px;
  box-sizing: border-box;
  .top_button {
    width: 100%;
    height: 70px;
    border: 1px solid lightgrey;
    padding: 0 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 150px;
      height: 40px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      font-size: 16px;
      color: #fff;
      outline: none;
    }
    .add_slogan {
      background-color: rgb(255, 152, 0);
      margin-right: 8px;
      svg {
        color: white;
        margin-right: 6px;
      }
    }
    .delete_batch {
      background-color: rgb(255, 81, 87);
      svg {
        color: #fff;
        margin-right: 6px;
      }
    }
    .search_box {
      display: flex;
      align-items: center;
      input {
        width: 240px;
        height: 40px;
        outline: none;
        padding: 0 5px;
        border-radius: 5px;
        border: 1px solid lightgrey;
        font-size: 15px;
      }
      .search_btn {
        width: 70px;
        height: 40px;
        background: rgb(133, 206, 97);
        font-size: 14px;
        margin-left: 10px;
      }
    }
  }
  //表格样式
  .table_show {
    margin-top: 30px;
  }
}
</style>
